<template>
	<view>
		<!-- #ifndef MP -->
		<uni-status-bar></uni-status-bar>
		<view>
			<view class="iconfont icon-guanbi flex align-center justify-center font-lg" style="width: 100rpx;height: 100rpx;"
			 hover-class="bg-light" @click="back"></view>
		</view>
		<!-- #endif -->

		<view class="text-center" style="padding-top: 130rpx;padding-bottom: 70rpx;font-size: 55rpx;">{{titleText}}</view>

		<view class="px-2">
			<template v-if="status==1">
				<view class="mb-2">
					<input type="text" v-model="username" placeholder="昵称/手机号/邮箱" class="border-bottom p-2" />
				</view>
				<view class="mb-2 flex align-stretch">
					<input type="text" v-model="password" placeholder="请输入密码" class="border-bottom p-2 flex-1" />
					<view class="border-bottom flex align-center justify-center font text-muted" style="width: 150rpx;">忘记密码？</view>
				</view>
			</template>

			<template v-else-if="status==2">
				<view class="mb-2 flex align-stretch">
					<view class="border-bottom flex align-center justify-center font px-2">+86</view>
					<input type="text" v-model="phone" placeholder="手机号" class="border-bottom p-2 flex-1" />
				</view>
				<view class="mb-2 flex align-stretch">
					<input type="text" v-model="code" placeholder="请输入验证码" class="border-bottom p-2 flex-1" />
					<view class="border-bottom flex align-center justify-center font-sm text-white" :class="codeTime > 0 ? 'bg-main-disabled' : 'bg-main'"
					 style="width: 180rpx;" @click="getCode">{{codeTime > 0 ? codeTime + ' s' : '获取验证码'}}</view>
				</view>
			</template>

			<template v-else-if="status == 3">
				<view class="mb-2">
					<input type="text" v-model="registerUsername" placeholder="请输入昵称" class="border-bottom p-2" />
				</view>
				<view class="mb-2">
					<input type="password" v-model="registerPass" placeholder="请输入密码" class="border-bottom p-2" />
				</view>
				<view class="mb-2">
					<input type="password" v-model="conRegisterPass" placeholder="确认密码" class="border-bottom p-2" />
				</view>
			</template>


		</view>

		<view class="py-2 px-3" v-if="this.status!==3">
			<button class="text-white" style="border-radius: 50rpx;border: 0;" type="primary" :disabled="disabled" :class="disabled ? 'bg-main-disabled':'bg-main'"
			 @click="submit" :loading="loading">{{loading ? '登录中...' : '登录'}}</button>
		</view>
		<view class="py-2 px-3" v-if="this.status===3">
			<button class="text-white" style="border-radius: 50rpx;border: 0;" type="primary" :disabled="registerdisabled" :class="registerdisabled ? 'bg-main-disabled':'bg-main'"
			 @click="registered" :loading="loading">{{loading ? '注册中...' : '注册'}}</button>
		</view>

		<view class="flex align-center justify-center pt-2 pb-4">
			<view class="text-primary font-sm" @click="changeStatus(2,true)">
				{{statusCode}}
			</view>
			<text class="text-muted mx-2">|</text>
			<view class="text-primary font-sm" @click="changeStatus(3,false)">没有账号？点我注册</view>
		</view>

		<view class="flex align-center justify-center">
			<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
			<view class="mx-2 text-muted">社交账号登录</view>
			<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
		</view>

		<other-login back></other-login>

		<view class="flex align-center justify-center text-muted">
			注册即代表同意<text class="text-primary">《彩蛋社区协议》</text>
		</view>

	</view>
</template>

<script>
	import uniStatusBar from '@/components/uni-ui/uni-status-bar/uni-status-bar.vue';
	import otherLogin from '@/components/common/other-login.vue';
	export default {
		components: {
			uniStatusBar,
			otherLogin
		},
		data() {
			return {
				status: 1,
				username: "",
				password: "",
				registerUsername:"",
				registerPass:"",
				conRegisterPass:"",
				phone: "",
				code: "",
				codeTime: 0,
				loading: false
			}
		},
		onLoad() {

		},
		computed: {
			disabled() {
				if ((this.username === '' || this.password === '') && (this.phone === '' || this.code === '')) {
					return true
				}
				return false
			},
			registerdisabled(){
				if (this.registerUsername === '' || this.registerPass === '' || this.conRegisterPass==='') {
					return true
				}
				return false
			},
			statusCode() {
				switch (this.status) {
					case 1:
						return '验证码登录'
						break;
					case 2:
						return '账号密码登录'
						break;
					default:
						return '返回登录页'
				}

			},
			titleText() {
				switch (this.status) {
					case 1:
						return '账号密码登录'
						break;
					case 2:
						return '验证码登录'
						break;
					default:
						return '账号注册'
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 初始化表单
			initForm() {
				this.username = ''
				this.password = ''
				this.phone = ''
				this.code = ''
				this.registerUsername=''
				this.registerPass=''
				this.conRegisterPass=''
			},
			// 切换登录方式
			changeStatus(value, islogin) {
				// 初始化表单
				this.initForm()
				if (islogin) {
					if (this.status == 1) {
						this.status = 2
					} else {
						this.status = 1
					}
					return
				}
				this.status = 3
			},
			// 获取验证码
			getCode() {
				// 防止重复获取
				if (this.codeTime > 0) {
					return;
				}
				// 验证手机号
				if (!this.validate()) return;
				// 请求数据
				this.$H.post('/user/sendcode', {
					phone: this.phone
				}, {
					native: true
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 5000
					});
					// 倒计时
					this.codeTime = 30
					let timer = setInterval(() => {
						if (this.codeTime >= 1) {
							this.codeTime--
						} else {
							this.codeTime = 0
							clearInterval(timer)
						}
					}, 1000)
				})
			},
			// 表单验证
			validate() {
				//手机号正则
				var mPattern = /^1[34578]\d{9}$/;
				if (!mPattern.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false
				}
				// ...更多验证
				return true
			},
			// 注册验证
			registerValidate(){
				if(this.registerPass!==this.conRegisterPass){
					uni.showToast({
						title: '两次输入密码不一致，请重新输入',
						icon: 'none'
					});
					return false
				}
				if(this.registerPass.length<6){
					uni.showToast({
						title: '密码不少于6位',
						icon: 'none'
					});
					return false
				}
				return true
			},
			// 提交
			submit() {
				// 表单验证
				let url = ""
				let data = ""
				if (this.status===2) {
					// 手机验证码登录
					if (!this.validate()) return;
					url = '/user/phonelogin'
					data = {
						phone: this.phone,
						code: this.code
					}
				} else {
					// 账号密码登录
					url = '/user/login'
					data = {
						username: this.username,
						password: this.password
					}
				}
				// 提交后端
				this.loading = true
				this.$H.post(url, data).then(res => {
					this.loading = false
					console.log(res);
					// 修改vuex的state,持久化存储
					this.$store.commit('login', res)
					// 开启socket
					this.$store.dispatch('openSocket')
					// 提示和跳转
					uni.navigateBack({
						delta: 1
					});
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
				}).catch(err => {
					// 登录失败
					this.loading = false
				})

			},
			// 注册提交
			registered(){
				//登录验证
				if (!this.registerValidate()) return;
				this.loading = true
				this.$H.post('/user/reg', {
					username:this.registerUsername,
					password:this.registerPass,
					repassword:this.conRegisterPass
				}).then(res=>{
					this.loading = false
						uni.showToast({
							title: '注册成功，请前往登录',
							icon: 'none'
						})
						this.status = 1
				}).catch(err => {
					// 登录失败
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					this.loading = false
				})
				// .then(res => {
				// 	this.loading = false
				// 	console.log(res)
				// 	// 提示和跳转
				// 	// uni.navigateBack({
				// 	// 	delta: 1
				// 	// });
				// 	uni.showToast({
				// 		title: '注册成功，请前往登录',
				// 		icon: 'none'
				// 	})
				// 	this.status = 1
				// })
			}
		}
	}
</script>

<style>

</style>
